<template>
  <div class="home">
    <div class="back">
      <el-button type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
    </div>
    <div class="top">
      <div class="box">
        <div class="picture">
          <img width="300" :src="moiveInfo.picture">
        </div>
        <div class="info">
          <div class="name">{{moiveInfo.title}}</div>
          <div class="direct">{{moiveInfo.director}}</div>
          <div class="type">{{moiveInfo.year}} / {{moiveInfo.country}}</div>
          <div class="star">
            <el-rate v-model="moiveInfo.star" disabled :max="10">
            </el-rate>{{moiveInfo.star}}
          </div>
          <div class="content">{{moiveInfo.content}}</div>
        </div>
      </div>
    </div>
    <div class="mid"> 相似推荐: </div>
    <div class="button">
      <div v-for="(item,index) in moiveList" :key="index">
        <div class="picture">
          <img width="150" :src="item.picture" @click="toDetail(item)">
        </div>
        <div class="name">
          <p>{{item.title}}</p>
        </div>
        <div class="content">
          <p>{{item.content}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 1600px;
  min-width: 1600px;
  height: 800px;
  margin: 0 auto;
  .back {
    position: absolute;
    width: 100px;
    height: 30px;
  }
  .top {
    width: 1600px;
    height: 500px;
    display: flex;
    .box {
      width: 900px;
      height: 450px;
      display: flex;
      margin: auto;
      .picture {
        width: 300px;
        height: 450px;
      }
      .info {
        width: 450px;
        position: relative;
        left: 75px;
        height: 450px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &>div {
          width: 600px;
          height: 65px;
        }
        .direct {
          height: 80px !important;
        }
        .content {
          height: 80px !important;
        }
      }
    }
  }
  .mid {
    position: relative;
    top: 30px;
  }
  .button {
    width: 1600px;
    height: 300px;
    position: relative;
    top: 50px;
    display: flex;
    &>div {
      width: 320px;
      height: 300px;
      .picture {
        width: 300px;
        height: 240px;
        display: flex;
        img {
          margin: auto;
          cursor: pointer;
        }
      }
      .name {
        width: 300px;
        height: 25px;
        font-weight: bold;
        p {
          text-align: center;
          margin: auto;
        }
      }
      .content {
        width: 300px;
        height: 30px;
        p {
          text-align: center;
          margin: auto;
        }
      }
    }
  }
}
</style>

<script>

export default {
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'referrer', content: 'never' }
    ]
  },
  data() {
    return {
      moiveList: [],
      moiveInfo: {},
      star: 5,
    }
  },
  methods: {
    async fetchData() {
      const res = await this.$http("/getDetail",{
        params: {
          _id: localStorage._id
        }
      })
      this.moiveInfo = res.data.data;
      this.moiveInfo.star = + this.moiveInfo.star;
    },
    toDetail(item) {
      localStorage._id = item._id;
      localStorage.country = [item.country.split(" ")][0];
      this.$router.push(`/detail?${item._id}`);
      this.fetchData();
      this.recommend();
    },
    async recommend() {
      this.moiveList = [];
      let category = localStorage.category;
      let country = [localStorage.country.split(" ")][0];
      const res = await this.$http("/getdata", {
        params: {
          category,
          country
        }
      });
      let randNumerList = [];
      while(randNumerList.length < 5) {
        let randNum = Math.floor(Math.random() * 100) % 10;
        if(randNumerList.indexOf(randNum) == -1 && res.data.data[randNum]._id != localStorage._id) {
          randNumerList.push(randNum);
          this.moiveList.push(res.data.data[randNum]);
        }
      }
    },
    back() {
      this.$router.push("/");
    }
  },
  created() {
    this.fetchData();
    this.recommend();
  }
}
</script>
